<div [formGroup]="form">
  <div class="form-field">
    <label for="wallets">{{ 'send.wallet-label' | translate }}</label>
    <div class="-select">
      <select formControlName="wallet" id="wallets" [attr.disabled]="busy ? 'true' : null" [ngClass]="{'element-disabled' : busy}">
        <option disabled hidden [ngValue]="''">{{ 'send.select-wallet' | translate }}</option>
        <ng-container *ngIf="wallets">
          <ng-container *ngFor="let wallet of wallets">
            <option [disabled]="!wallet.coins || wallet.coins.isLessThanOrEqualTo(0)" [ngValue]="wallet">
              {{ wallet.label }} - {{ (wallet.coins ? wallet.coins.toString() : 0) | amount }}
              ({{ wallet.hours.toString() | amount:false }})
            </option>
          </ng-container>
        </ng-container>
      </select>
    </div>
  </div>

  <ng-container *ngIf="wallet">
    <div class="form-field">
      <label [for]="!busy ? 'addresses' : ''" (click)="!busy ? selectAddresses.open() : null">
        {{ 'send.addresses-label' | translate }}
        <mat-icon [matTooltip]="'send.addresses-help' | translate">help</mat-icon>
      </label>
      <div class="-select">
        <mat-select
          #selectAddresses multiple
          formControlName="addresses"
          [compareWith]="addressCompare"
          id="addresses"
          [placeholder]="'send.all-addresses' | translate"
          [attr.disabled]="busy ? 'true' : null"
          [ngClass]="{'element-disabled' : busy}">
          <mat-option *ngFor="let addr of addresses" [value]="addr">
            {{ addr.address }} - {{ (addr.coins ? addr.coins.toString() : 0) | amount }}
            ({{ addr.hours.toString() | amount:false }})
          </mat-option>
          <mat-select-trigger>
            <div *ngFor="let address of form.get('addresses').value">
              {{ address.address }} - {{ (address.coins ? address.coins.toString() : 0) | amount }}
              ({{ address.hours.toString() | amount:false }})
            </div>
          </mat-select-trigger>
        </mat-select>
      </div>
    </div>

    <div class="form-field">
      <label [for]="!busy ? 'outputs' : null" (click)="!busy ? selectOutputs.open() : null">
        {{ 'send.outputs-label' | translate }}
        <mat-icon [matTooltip]="'send.outputs-help' | translate">help</mat-icon>
        <mat-spinner *ngIf="loadingUnspentOutputs"></mat-spinner>
      </label>
      <div class="-select">
        <mat-select
          #selectOutputs multiple
          formControlName="outputs"
          [compareWith]="outputCompare"
          id="outputs"
          [placeholder]="'send.all-outputs' | translate"
          [attr.disabled]="busy ? 'true' : null"
          [ngClass]="{'element-disabled' : busy}">
          <mat-option *ngFor="let out of unspentOutputs" [value]="out">
            {{ out.hash }} - {{ (out.coins ? out.coins.toString() : 0) | amount }}
            ({{ out.calculated_hours.toString() | amount:false }})
          </mat-option>
          <mat-select-trigger *ngIf="form.get('outputs').value && form.get('outputs').value.length > 0">
            <div *ngFor="let out of form.get('outputs').value">
              {{ out.hash }} - {{ (out.coins ? out.coins.toString() : 0) | amount }}
              ({{ out.calculated_hours.toString() | amount:false }})
            </div>
          </mat-select-trigger>
          <mat-select-trigger *ngIf="!form.get('outputs').value || form.get('outputs').value.length === 0">
              <div>{{ 'send.all-outputs' | translate }}</div>
            </mat-select-trigger>
        </mat-select>
      </div>
    </div>
    <div class="form-field -available-msg">
      <span>{{ 'send.available-msg-part1' | translate }}</span>
      <span class="value">
        {{ availableCoins.toString() | amount }}
      </span>
      <span>{{ 'send.available-msg-part2' | translate }}</span>
      <span class="value">
        {{ availableHours.toString() | amount:false }}
      </span>
      <span>{{ 'send.available-msg-part3' | translate }}</span>
      <span class="value">
        {{ minimumFee.toString() | amount:false }}
      </span>
      <span>{{ 'send.available-msg-part4' | translate }}</span>
    </div>
  </ng-container>

  <div class="form-field">
    <label for="destination" class="destinations-label">
      {{ 'send.destinations-label' | translate }}
      <mat-icon [matTooltip]="('send.destinations-help' + (this.autoHours ? '1' : '2')) | translate">help</mat-icon>
    </label>
    <div class="coin-selector-container" *ngIf="price" [ngClass]="{ 'element-disabled': busy }">
      <app-double-button
        [leftButtonText]="'coin' | commonText"
        [rightButtonText]="'common.usd' | translate"
        className="light small"
        [activeButton]="selectedCurrency"
        (onStateChange)="changeActiveCurrency($event)"
      ></app-double-button>
    </div>
    <span class="-options" (click)="openMultipleDestinationsPopup()" [ngClass]="{'element-disabled' : busy}">
      {{ 'send.bulk-send.title' | translate }} <mat-icon>keyboard_arrow_down</mat-icon>
    </span>

    <div formArrayName="destinations" *ngFor="let dest of destControls; let i = index;" class="-destination">
      <div [formGroupName]="i" class="row">
        <div class="col-lg-5 col-md-4">
          <input formControlName="address" [id]="i === 0 ? 'destination' : ''" [attr.disabled]="busy ? 'true' : null">
        </div>
        <div class="col-md-3">
          <div class="-input-addon">
            <input formControlName="coins" [attr.disabled]="busy ? 'true' : null">
            <span>{{ selectedCurrency === doubleButtonActive.LeftButton ? ('coin' | commonText) : ('common.usd' | translate) }}</span>
          </div>
          <div class="coins-value-label">
            <span *ngIf="price && values[i] < 0">{{ 'send.invalid-amount' | translate }}</span>
            <span *ngIf="price && values[i] >= 0 && selectedCurrency === doubleButtonActive.LeftButton">
              &#x007e; {{ values[i] | number:'1.0-2' }} {{ 'common.usd' | translate }}
            </span>
            <span *ngIf="price && values[i] >= 0 && selectedCurrency === doubleButtonActive.RightButton">
              &#x007e; {{ values[i] | amount }}
            </span>
            <div class="link" [ngClass]="{ 'centerd-link': !price }" (click)="assignAll(i)">({{ 'send.send-all-available-coins' | translate }})</div>
          </div>
        </div>
        <div class="col-lg-3 col-md-4">
          <div [ngClass]="{ '-input-addon': true, '-hidden': autoHours }">
            <input formControlName="hours" [attr.disabled]="busy ? 'true' : null">
            <span>{{ 'hours' | commonText }}</span>
          </div>
        </div>
        <div class="col-md-1 -icons" [ngClass]="{'element-disabled' : busy}">
          <img *ngIf="i === 0" (click)="addDestination()" src="../../../../../assets/img/plus-green.png" alt="plus">
          <img *ngIf="i !== 0" (click)="removeDestination(i)" src="../../../../../assets/img/minus-grey.png" alt="minus">
        </div>
      </div>
    </div>
    <div class="row" *ngIf="destControls.length > 1">
      <div class="col-lg-5 col-md-4"></div>
      <div class="col-md-3">
        <div class="coins-value-label">
          <span>{{ 'send.total' | translate }}</span> {{ totalCoins.toString() | amount }} / {{ totalConvertedCoins.toString() | number:'1.0-2' }} {{ 'common.usd' | translate }}
        </div>
      </div>
      <div class="col-lg-3 col-md-4" *ngIf="!autoHours">
        <div class="coins-value-label">
          <span>{{ 'send.total' | translate }}</span> {{ totalHours.toString() | amount:false }}
        </div>
      </div>
    </div>
  </div>

  <div class="form-field">
    <label for="change-address">
      {{ 'send.change-address-label' | translate }}
      <mat-icon [matTooltip]="'send.change-address-help' | translate">help</mat-icon>
      <span class="-options" (click)="selectChangeAddress($event)" [ngClass]="{'element-disabled' : busy}">
        {{ 'send.change-address-select' | translate }} <mat-icon>keyboard_arrow_down</mat-icon>
      </span>
    </label>
    <input formControlName="changeAddress" id="change-address" [attr.disabled]="busy ? 'true' : null">
  </div>

  <div class="form-field">
    <label for="note">
      {{ 'send.personal-note-label' | translate }}
      <mat-icon [matTooltip]="'send.personal-note-help' | translate">help</mat-icon>
    </label>
    <input formControlName="note" id="note" (keydown.enter)="preview()" [maxlength]="maxNoteChars" [attr.disabled]="busy ? 'true' : null">
  </div>

  <div class="-autohours" [ngClass]="{'element-disabled' : busy}">
    <div class="row">
      <div class="col-xl-4 col-lg-5 col-md-7">
        <mat-checkbox class="-check" (change)="setAutoHours($event)" [checked]="autoHours" [attr.disabled]="busy ? 'true' : null">
          <div class="-space-between">
            <span>{{ 'send.hours-allocation-label' | translate }}</span>
            <span class="-options" (mousedown)="$event.stopPropagation();" (click)="toggleOptions($event)" *ngIf="autoHours">
              {{ 'send.options-label' | translate }} <mat-icon>{{ autoOptions ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>
            </span>
          </div>
        </mat-checkbox>
      </div>
    </div>

    <div [ngClass]="{ 'row -options-wrapper': true, '-hidden': !autoOptions }">
      <div class="col-md-5">
        <div class="form-field">
          <label class="-space-between" for="value">
            <span>
              {{ 'send.value-label' | translate }}
              <mat-icon [matTooltip]="'send.value-help' | translate">help</mat-icon>
            </span>
            <span>{{ autoShareValue | number:'1.0-2' }}</span>
          </label>
          <mat-slider class="-slider" min="0.1" max="1" step="0.01" id="value"
                      (input)="setShareValue($event)" [value]="autoShareValue"
                      [attr.disabled]="busy ? 'true' : null"
          ></mat-slider>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="-buttons">
  <app-button #previewButton (action)="preview()" [disabled]="!form.valid">
    {{ 'send.preview-button' | translate }}
  </app-button>
  <app-button #sendButton (action)="send()" class="primary" [disabled]="!form.valid">
    {{ 'send.send-button' | translate }}
  </app-button>
</div>
